<template>
  <div class="total-container">
    <div class="flex-container">
      <div class="item-box" v-for="item in data" :key="item.title">
        <div class="left-title">
          <div
            class="title"
            v-for="element in Math.ceil(item.title.length / 4)"
            :key="element"
          >
            {{ item.title.slice((element - 1) * 4, element * 4) }}
          </div>
        </div>
        <div class="right-value">
          <div class="row-1">
            <span class="text">{{ item.desc1 }}</span>
            <span class="num">{{ item.num1 }}</span>
            <span class="text">{{ item.unit1 }} </span>
            <span class="text">{{ item.desc2 }}</span>
            <span class="num">{{ item.num2 }}</span>
            <span class="text">{{ item.unit2 }}</span>
          </div>
          <div class="row-2">
            <span class="text">{{ item.desc3 }}</span>
            <span class="num">{{ item.num3 }}</span>
            <span class="text">{{ item.unit3 }} </span>
            <span class="text">{{ item.desc4 }}</span>
            <span class="num">{{ item.num4 }}</span>
            <span class="text">{{ item.unit4 }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getYlbzgk } from '@/api/socialSecurity'
export default {
  data() {
    return {
      data: null
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const [res1, res2, res3] = await Promise.all([
        getYlbzgk('机关事业单位'),
        getYlbzgk('企业职工'),
        getYlbzgk('城乡居民')
      ])
      this.data = [
        this.initObj(res1, '机关事业单位'),
        this.initObj(res2, '企业职工'),
        this.initObj(res3, '城乡居民')
      ]
    },
    initObj(res, name) {
      return {
        title: name,
        num1: res.result[0].field_value,
        num2: res.result[1].field_value,
        num3: res.result[2].field_value,
        num4: res.result[3].field_value,
        unit1: res.result[0].unit,
        unit2: res.result[1].unit,
        unit3: res.result[2].unit,
        unit4: res.result[3].unit,
        desc1: res.result[0].field_name,
        desc2: res.result[1].field_name,
        desc3: res.result[2].field_name,
        desc4: res.result[3].field_name
      }
    }
  }
}
</script>
unit1
<style lang="scss" scoped>
.total-container {
  height: 100%;
  .flex-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .item-box {
      width: 405px;
      height: 75px;
      background: url('../../img/left-row2-icon1.png') no-repeat center center;
      background-size: 100% 100%;
      position: relative;
      .left-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 73px;
      }
      .title {
        font-family: YouSheBiaoTiHei;
        font-size: 16px;
        color: #19fdf5;
        line-height: 15px;
        text-shadow: 2px 0px 0px #030e13;
        font-style: normal;
        text-transform: none;
      }
      .right-value {
        position: absolute;
        top: 10px;
        right: 10px;
        .row-1 {
          margin-bottom: 20px;
        }
        .text {
          font-family: MicrosoftYaHei;
          font-size: 14px;
          color: #ffffff;
          line-height: 14px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .num {
          font-family: MicrosoftYaHei;
          font-size: 14px;
          color: #fddc00;
          line-height: 14px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
